<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>皮卡丘</title>
    <!-- <link rel="stylesheet" href="./style.css" /> -->
<style>
* {
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
#buttons {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-right: 10px;
}
#buttons > button {
  margin-bottom: 10px;
  padding: 4px 8px;
}
#demo2 {
  display: none;
}
#demo {
  position: fixed;
  height: 30vh;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid red;
  overflow-y: auto;
}
#demo::-webkit-scrollbar {
  display: none;
}
#html {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70vh;
}
/* 把部分style放过来 */
</style>
<style>
  /* 首先准备一个div */
.nose:hover {
  transform-origin: center bottom;
  animation: noseWave 300ms infinite linear;
}
@keyframes noseWave {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-5deg);
  }
  66% {
    transform: rotate(5deg);
  }
  99% {
    transform: rotate(0deg);
  }
}

/*画眼睛*/

.eye.left {
  transform: translateX(-100px);
}
.eye.right {
  transform: translateX(100px);
}
@keyframes eyeMove {
  0%,
  100% {
    top: 2px;
    left: 2px;
  }
  30%,
  60%,
  70% {
    top: 0;
    left: 15px;
  }
  40% {
    top: 0;
    left: 15px;
  }
  50% {
    top: 0;
    left: 10px;
  }
  80%,
  90% {
    top: 17px;
    left: 15px;
  }
}
/*画嘴巴*/
.mouth .up .lip::before {
  content: "";
  display: block;
  width: 7px;
  height: 30px;
  position: absolute;
  bottom: 0;
  background: #ffcf00;
}
.mouth .up .lip.left::before {
  right: -6px;
}
.mouth .up .lip.right::before {
  left: -6px;
}
@keyframes mouthMove {
  0%,
  46%,
  54%,
  100% {
    height: 180px;
  }
  50% {
    height: 10px;
  }
}
/*画脸颊*/
@keyframes cheekMove {
  0%,
  46%,
  54%,
  100% {
    width: 84px;
    height: 84px;
    top: 200px;
  }
  50% {
    width: 70px;
    height: 70px;
    top: 180px;
  }
}
.cheek > img {
  position: absolute;
  top: 50%;
  left: 50%;
}
.cheek.left {
  transform: translateX(-170px);
  background: #ff0000;
  border-radius: 50%;
}
.cheek.left > img {
  transform: rotateY(170deg);
  transform-origin: 0 0;
}
.cheek.right {
  transform: translateX(170px);
  background: #ff0000;
  border-radius: 50%;
}
/*再加两条小手*/
.hand.left {
  transform: translateX(-90px);
}
.hand.right {
  transform: translateX(96px) rotateY(180deg);
}
@keyframes handMove {
  0%,
  46%,
  54%,
  100% {
    top: 360px;
  }
  50% {
    top: 356px;
  }
}
/*精灵球*/
@keyframes box-rotate {
  0%,
  90%,
  100% {
    transform: rotate(0deg);
  }
  40%,
  50% {
    transform: rotate(360deg);
    box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.9);
  }
}
@keyframes bg_change {
  0%,
  40%,
  60%,
  90%,
  100% {
    background: none;
  }
  50% {
    background: red;
  }
}
  </style>
</head>

<body>
  <style id="demo2"></style>
  <div id="demo"></div>

  <div id="buttons">
    <button id="btnPause">暂停</button>
    <button id="btnPlay">播放</button>
    <button id="btnSlow">慢速</button>
    <button id="btnNormal">中速</button>
    <button id="btnFast">快速</button>
  </div>
    <div id="html">
      <div class="skin">
        <div class="eye left"></div>
        <div class="eye right"></div>
        <div class="nose">
          <div class="yuan"></div>
        </div>
        <div class="cheek left">
          <img src="./images/flash.gif" />
        </div>
        <div class="cheek right">
          <img src="./images/flash.gif" />
        </div>
        <div class="mouth">
          <div class="up">
            <div class="lip left"></div>
            <div class="lip right"></div>
          </div>
          <div class="down">
            <div class="yuan1">
              <div class="yuan2"></div>
            </div>
          </div>
        </div>
        <div class="hand left">
          <img src="./images/hand.png" />
        </div>
        <div class="hand right">
          <img src="./images/hand.png" />
        </div>
        <div class="box">
          <div class="box_main">
            <div class="box_circle"></div>
          </div>
        </div>
      </div>
    </div>
    <audio src="./images/sound.mp3" id="sound" preload hidden></audio>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="test.js"></script>
  </body>
</html>
